import React, { Component } from 'react'
// import PubSubJS from 'pubsub-js'
import { Route, Switch, Redirect } from "react-router-dom"
import Header from "../Header"
import Search from "../../../components/Search"
import CategoryShow from "../CategoryShow"
import Foodkind from "../Foodkind"
import { CategroyWrap } from "../styledCategory/styled.js"

export default class Category extends Component {

    state = {
        checked: "分类"
    }

    // componentDidMount() {
    //     this.token = PubSubJS.subscribe("checked", (_, data) => {
    //         console.log(data);
    //         this.setState(data)
    //     })
    // }

    // componentWillUnmount() {
    //     PubSubJS.unsubscribe(this.token)
    // }

    render() {
        // let {checked} = this.state
        return (
            <CategroyWrap>
                <Header></Header>
                <Search></Search>
                {/* {
                    checked === "分类" ? <CategoryShow></CategoryShow>
                    : <Foodkind></Foodkind>
                } */}
                <Switch>
                    <Route path="/category" render={() => (<CategoryShow></CategoryShow>)}></Route>
                    <Route path="/material" render={() => (<Foodkind></Foodkind>)}></Route>
                    <Redirect from="/" to="/category"/>
                </Switch>
            </CategroyWrap>
        )
    }
}
